<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>监控视频</title>

    <style>
        .biankuangs{ border:solid #A6D2FF 1px; border-top:0px; }
        #item_text2,#item_text1,#itemtypes2,#item_text3{ /**/display:none;}
        .wpmd {font-size: 13px;font-family: 'Arial';font-style: normal;font-weight: normal;}
        .jklabel{
            position: absolute;
            width: calc(100% - 2px);
            height:30px;
            /*margin-left: 2px;*/
            text-align: center;
            background-color: rgba(0,0,0,0.4);
            color: white;
            font-size: 1em;
        }
        .container {
            /* width: 900px; */
            /* height: 1990px; */
            background: rgba(248, 248, 248, 0.13);
            margin: 0 auto;
            text-align: center;
            vertical-align:middle;
            /*horizontal-align: middle;*/
        }
        .Intranet {
            float: left;
            width:33%;
            margin-top: 10px;
        }
        .hideDiv {
            display: none;
        }
    </style>
    <link rel="stylesheet" href="../../css/mycover.css">

    <link href="../../lib/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet">
    <script type="text/javascript" src="../../js/jquery.js"></script>
    <script type="text/javascript" src="../../lib/ztree/jquery.ztree.all.min.js"></script>

    <!--<link href="js/lib/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet">-->
    <!--<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>-->

    <link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all" />    
    <!--<script type="text/javascript" src="lib/layui/lay/modules/layer.js"></script>-->
    <!--<script type="text/javascript" src="echarts/echarts.js"></script>-->
    <script type="text/javascript" src="../../lib/layui/layui.js"></script>
    <!--<script type="text/javascript" src="js/lib/ztree/jquery.ztree.all.min.js"></script>-->
    <script type="text/javascript" src="../../js/xadmin.js"></script>
    <link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">
    <!--<script src="https://js.arcgis.com/3.46/init.js"></script>-->
    <script src="https://js.arcgis.com/3.46/init.js"></script>
    <script type="text/javascript">
        //region Z-tree相关行为
        function diaodu(){
            layer.alert("backlook!");
        }
        var setting = {
            view: {
                fontCss: getFont,
                nameIsHTML: true
            },
            callback: {
                onClick: onClick
            }
        };

        var zNodes = [{
            name: "视频监控",
            id:0,
            font:{'color':'white'},
            open: true,
            children: [
                {
                    name: "珲春口岸监控",
                    id:10,
                    font:{'color':'white'},
                    open: true,
                    children:[
                        {
                            id:11,
                            name:"监控点1：口岸安检区-摄像头环视",
                            font:{'color':'white'}
                        },{
                            id:12,
                            name:"监控点2：珲春口岸-车流",
                            font:{'color':'white'}
                        },{
                            id:13,
                            name:"监控点3：珲春海关",
                            font:{'color':'white'}
                        },{
                            id:14,
                            name:"监控点4：口岸安检区-监测到人",
                            font:{'color':'white'}
                        },{
                            id:15,
                            name:"监控点5：口岸安检区-摄像头从近到远",
                            font:{'color':'white'}
                        }
                    ]
                },
                {
                    name: "沙坨子口岸监控",
                    id:20,
                    font:{'color':'white'},
                    open: true,
                    children:[
                        {
                            id:21,
                            name:"监控点1：点位1",
                            font:{'color':'white'}
                        },{
                            id:22,
                            name:"监控点2：点位2",
                            font:{'color':'white'}
                        }
                    ]
                },
                {
                    name: "圈河口岸监控",
                    id:30,
                    font:{'color':'white'},
                    open: true,
                    children:[
                        {
                            id:31,
                            name:"监控点1：点位1",
                            font:{'color':'white'}
                        },{
                            id:32,
                            name:"监控点2：点位2",
                            font:{'color':'white'}
                        }
                    ]
                },
            ]
        }
        ];

        function getFont(treeId, node) {
            return node.font ? node.font : {};
        }

        $(document).ready(function() {
            $.fn.zTree.init($("#tree"), setting, zNodes);
        });

        //树的点击操作
        function onClick(event, treeId, treeNode, clickFlag){

            switch (treeNode.id){
                case 11:
                    if(clickFlag == 1){
                        $(".Intranet").css("display","none");
                        $("#camo11").css("display","block");
                        $("#camo11").css("width","100%");
                        $("#camo11").css("height","100%");
                    }else{ //还原4视图
                        $(".Intranet").css("display","block");
                        $("#camo11").css("width","50%");
                        $("#camo11").css("height","50%");
                    }
                    centerZoomFunc(14522422.370990483,5277251.797557315,3857,15);
                    break;
                case 12:
                    if(clickFlag == 1){
                        $(".Intranet").css("display","none");
                        $("#camo12").css("display","block");
                        $("#camo12").css("width","100%");
                        $("#camo12").css("height","100%");
                    }else{ //还原4视图
                        $(".Intranet").css("display","block");
                        $("#camo12").css("width","50%");
                        $("#camo12").css("height","50%");
                    }
                    centerZoomFunc(14522549.513545012,5277085.813097962,3857,15);
                    break;
                case 13:
                    if(clickFlag == 1){
                        $(".Intranet").css("display","none");
                        $("#camo13").css("display","block");
                        $("#camo13").css("width","100%");
                        $("#camo13").css("height","100%");
                    }else{ //还原4视图
                        $(".Intranet").css("display","block");
                        $("#camo13").css("width","50%");
                        $("#camo13").css("height","50%");
                    }
                    centerZoomFunc(14522589.245586343,5277240.972368097,3857,15);
                    break;
                case 14:
                    if(clickFlag == 1){
                        $(".Intranet").css("display","none");
                        $("#camo14").css("display","block");
                        $("#camo14").css("width","100%");
                        $("#camo14").css("height","100%");
                    }else{ //还原4视图
                        $(".Intranet").css("display","block");
                        $("#camo14").css("width","50%");
                        $("#camo14").css("height","50%");
                    }
                    centerZoomFunc(14522666.060933053,5277074.988100045,3857,15);
                    break;
                case 15:
                    if(clickFlag == 1){
                        $(".Intranet").css("display","none");
                        $("#camo15").css("display","block");
                        $("#camo15").css("width","100%");
                        $("#camo15").css("height","100%");
                    }else{ //还原4视图
                        $(".Intranet").css("display","block");
                        $("#camo15").css("width","50%");
                        $("#camo15").css("height","50%");
                    }
                    centerZoomFunc(14522602.489600133,5277165.196544521,3857,15);
                    break;
                case 21:
                    if(clickFlag == 1){
                        $(".Intranet").css("display","none");
                        $("#camo21").css("display","block");
                        $("#camo21").css("width","100%");
                        $("#camo21").css("height","100%");
                    }else{ //还原4视图
                        $(".Intranet").css("display","block");
                        $("#camo21").css("width","50%");
                        $("#camo21").css("height","50%");
                    }
                    centerZoomFunc(14499298.450839922,5281711.707829185,3857,14);
                    break;
                case 22:
                    if(clickFlag == 1){
                        $(".Intranet").css("display","none");
                        $("#camo22").css("display","block");
                        $("#camo22").css("width","100%");
                        $("#camo12").css("height","100%");
                    }else{ //还原4视图
                        $(".Intranet").css("display","block");
                        $("#camo22").css("width","50%");
                        $("#camo22").css("height","50%");
                    }
                    centerZoomFunc(14498392.178493917,5278487.081148802,3857,14);
                    break;
                case 31:
                    if(clickFlag == 1){
                        $(".Intranet").css("display","none");
                        $("#camo31").css("display","block");
                        $("#camo31").css("width","100%");
                        $("#camo31").css("height","100%");
                    }else{ //还原4视图
                        $(".Intranet").css("display","block");
                        $("#camo31").css("width","50%");
                        $("#camo31").css("height","50%");
                    }
                    centerZoomFunc(14530948.531610694,5247418.402899286,3857,14);
                    break;
                case 32:
                    if(clickFlag == 1){
                        $(".Intranet").css("display","none");
                        $("#camo32").css("display","block");
                        $("#camo32").css("width","100%");
                        $("#camo32").css("height","100%");
                    }else{ //还原4视图
                        $(".Intranet").css("display","block");
                        $("#camo32").css("width","50%");
                        $("#camo32").css("height","50%");
                    }
                    centerZoomFunc(14530821.38894485,5252038.041619186,3857,14);
                    break;
                case 0:  //点击根节点“视频监控”
                    if(clickFlag == 1){
                        $(".Intranet").css("display","none");
                        $("#camo11").css("display","block");
                        $("#camo11").css("width","50%");
                        $("#camo11").css("height","50%");
                        $("#camo12").css("display","block");
                        $("#camo12").css("width","50%");
                        $("#camo12").css("height","50%");
                        $("#camo22").css("display","block");
                        $("#camo22").css("width","50%");
                        $("#camo22").css("height","50%");
                        $("#camo31").css("display","block");
                        $("#camo31").css("width","50%");
                        $("#camo31").css("height","50%");
                        centerZoomFunc(130.39,42.69,4326,11);
                    }
                    /*else{ //还原4视图
                        $(".Intranet").css("display","block");
                        $("#camo11").css("width","50%");
                        $("#camo11").css("height","50%");
                    }*/
                    break;
                case 10:  //点击节点“珲春口岸监控”
                    if(clickFlag == 1){
                        $(".Intranet").css("display","none");
                        $("#camo11").css("display","block");
                        $("#camo11").css("width","50%");
                        $("#camo11").css("height","50%");
                        $("#camo12").css("display","block");
                        $("#camo12").css("width","50%");
                        $("#camo12").css("height","50%");
                        $("#camo13").css("display","block");
                        $("#camo13").css("width","50%");
                        $("#camo13").css("height","50%");
                        $("#camo14").css("display","block");
                        $("#camo14").css("width","50%");
                        $("#camo14").css("height","50%");
                        centerZoomFunc(130.46,42.77,4326,14);
                    }
                    break;
                case 20:  //点击节点“沙坨子口岸监控”
                    if(clickFlag == 1){
                        $(".Intranet").css("display","none");
                        $("#camo21").css("display","block");
                        $("#camo21").css("width","100%");
                        $("#camo21").css("height","50%");
                        $("#camo22").css("display","block");
                        $("#camo22").css("width","100%");
                        $("#camo22").css("height","50%");
                        centerZoomFunc(130.25,42.81,4326,12);
                    }
                    break;
                case 30:  //点击节点“圈河口岸监控”
                    if(clickFlag == 1){
                        $(".Intranet").css("display","none");
                        $("#camo31").css("display","block");
                        $("#camo31").css("width","100%");
                        $("#camo31").css("height","50%");
                        $("#camo32").css("display","block");
                        $("#camo32").css("width","100%");
                        $("#camo32").css("height","50%");
                        centerZoomFunc(130.53,42.57,4326,12);
                    }
                    break;
            }

            /*if(treeNode.id == 11){
                if(clickFlag == 1){
                    $(".came").css("display","none");
                    $("#camo1").css("display","block");
                    $("#camo1").css("width","100%");
                    $("#camo1").css("height","100%");
                }else{ //还原4视图
                    $(".came").css("display","block");
                    $("#camo1").css("width","50%");
                    $("#camo1").css("height","50%");
                }
            }*/
        }
        //endregion

        //region 视频回看
        function backsee(){
            layer.open({
                type:1,
                title:'视频回放',
                area: ['700px', ''],
                zIndex:19891014, //默认19891014
                //shadeClose: true,
                //close:true,
                //shade: [0.1, '#ffff00'], //或者shade: 0
                //shade: false,
                content: $('#videoReplay')
                /*content: '<div style="width: 100%;height:100%;">\
                            <div class="jklabel">监控点001</div>\
                            <video width="100%" height="100%" controls="controls">\
                              <source src="images/videos/jk.mp4" type="video/mp4" />\
                             </video>\
                          </div>'*/
            });
            //x_admin_show('视频回放',$('#videoReplay'),600,400);
        }
      //endregion
    </script>
    <script>

        var map, idx; var centerZoomFunc;

        require(["dojo/dom",
            "dojo/on",
            "esri/map",
            "esri/layers/FeatureLayer",
            "esri/layers/ArcGISDynamicMapServiceLayer",
            "esri/layers/ArcGISTiledMapServiceLayer",
            "esri/symbols/PictureMarkerSymbol",
            "esri/renderers/SimpleRenderer",
            "esri/InfoTemplate",
            "dojo/domReady!"], function (
            dom,
            on,
            Map,
            FeatureLayer,
            ArcGISDynamicMapServiceLayer,
            ArcGISTiledMapServiceLayer,
            PictureMarkerSymbol,
            SimpleRenderer,
            InfoTemplate) {
            // 以下是创建地图与加入底图的代码
            map = new Map("map",{logo:false, slider:false });

            //var baseLay = new ArcGISTiledMapServiceLayer("http://202.111.178.10:36080/arcgis/rest/services/BHQ/JL_15m/MapServer");
            //map.addLayer(baseLay,0);
            var baseLay2 = new ArcGISTiledMapServiceLayer("http://202.111.178.10:61236/arcgis/rest/services/71KT5/ZCBJ_Imagery/MapServer");
            map.addLayer(baseLay2, 1);
            //var lyr01 = new ArcGISDynamicMapServiceLayer("http://202.111.178.10:34576/arcgis/rest/services/KouAn/kouan_features/MapServer/");
            var lyr01 = new ArcGISDynamicMapServiceLayer("http://202.111.178.10:61236/arcgis/rest/services/71KT5/HunchunFeatures/MapServer/");
            map.addLayer(lyr01);
            
            map.on("load",function(){
                /*var point = new esri.geometry.Point( {"x": 130.46, "y": 42.77, "spatialReference": {"wkid": 4326 } });
                map.centerAndZoom(point,13);*/
                centerZoomFunc(130.34,42.74,4326,10);
            });

            //var camerolayer = new FeatureLayer("http://202.111.178.10:34576/arcgis/rest/services/KouAn/kouan_features/MapServer/0",{
            var camerolayer = new FeatureLayer("http://202.111.178.10:61236/arcgis/rest/services/71KT5/KAVideoJKD/MapServer/0",{
                mode: FeatureLayer.MODE_SNAPSHOT,
                outFields: ["*"],
            });

            //设置点图层的摄像头符号
            var pictureMarkerSymbol = new PictureMarkerSymbol('images/videos/camero.png', 25, 25);
            var renderer = new SimpleRenderer(pictureMarkerSymbol);
            camerolayer.setRenderer(renderer);

            map.addLayer(camerolayer);

            camerolayer.on("click",function(evt){
                console.log(evt);
                console.log(evt.graphic.attributes.Id,99);
                var vid = evt.graphic.attributes.Id;
                var vSource = "";
                switch (vid){
                    case 11:
                       vSource =  "images/videos/v11.mp4";
                       break;
                    case 12:
                        vSource =  "images/videos/v12.mp4";
                        break;
                    case 13:
                        vSource =  "images/videos/v13.mp4";
                        break;
                    case 14:
                        vSource =  "images/videos/v14.mp4";
                        break;
                    case 15:
                        vSource =  "images/videos/v15.mp4";
                        break;
                    case 21:
                        vSource =  "images/videos/v21.mp4";
                        break;
                    case 22:
                        vSource =  "images/videos/v22.mp4";
                        break;
                    case 31:
                        vSource =  "images/videos/v31.mp4";
                        break;
                    case 32:
                        vSource =  "images/videos/v32.mp4";
                        break;
                }
                if(idx != null){
                    layer.close(idx);
                }
                idx = layer.open({
                    skin: 'demo-class',
                    //title:evt.graphic.attributes.FID+1,
                    title:"视频监控点位"+evt.graphic.attributes.FID+1,
                    type: 2,
                    area: ['700px', '430px'],
                    shadeClose: true,
                    shade: false,
                    content: '6-jiankong-1.html?vSource='+vSource,
                });

                //toCenterZoom(14499298.450839922,5281711.707829185,3857);

            });

            function toCenterZoom(x,y,srid,zoom){
                var point = new esri.geometry.Point( {"x":x , "y":y , "spatialReference": {"wkid": srid } });
                map.centerAndZoom(point,zoom);
            }

            centerZoomFunc = toCenterZoom;

        });

    </script>
</head>
<body>



<div id="left" style="position: absolute; left: 0px; top: 0px; height: 100%; width: 300px; border-right: 2px solid #ffffff">
    <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
        <tbody>
            <tr>
                <td width="100%" height="30px;" style="text-align: center; background-color: rgba(0,0,0,0.5); color:white">视频监控资源</td>
            </tr>
        </tbody>
    </table>
    <ul id="tree" class="ztree"></ul>
    <div style="position: absolute;width: 100%; height: 200px; bottom: 10px; left: 100px; /*text-align: center;*/">
        <img src="images/videos/yt.png"><br><br>
        <div style="text-align:center;margin-left: -222px;"><input type="button" value="+" class="layui-btn layui-btn-xs"><label>调焦</label><input type="button" value="-" class="layui-btn layui-btn-xs"></div>
        <br><br>
        <input type="button" value="视频回放" class="layui-btn" onclick="backsee()">
    </div>
</div>
<div id="left2" style="position: absolute; left: 300px; top: 0px; height: 100%; width: 500px; border-right: 2px solid #ffffff">
    <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
        <tbody>
        <tr>
            <td width="100%" height="30px;" style="text-align: center; background-color: rgba(0,0,0,0.5); color:white">地图点位</td>
        </tr>
        </tbody>
    </table>
    <div style="width: 100%; height: 100%; top: 50px; left: 300px; text-align: center;">
        <div id="map" style="height:100%;width:100%;"></div>
    </div>
</div>

<!--<div style="position: absolute; top: 0; right: 10px; left: 801px; bottom: 10px;">
    <div class="came" id="camo11" style="position: absolute; left: 0; top: 0; width: 50%;height: 50%;">
        <div style="height: 100%;width: calc(100% - 2px)"><div class="jklabel">监控点1</div>
            <video width="100%" height="100%" controls="controls" autoplay="autoplay">
                &lt;!&ndash;<source src="images/videos/kouan.avi" type="video/mp4" />&ndash;&gt;
                <source src="images/videos/v11.mp4" type="video/mp4" />
            </video>
        </div>
    </div>
    <div class="came" id="camo12" style="position: absolute; left: 50%; top: 0; width: 50%;height: 50%;">
        <div style="height: 100%;width: calc(100% - 2px);"><div class="jklabel">监控点2</div>
            <video width="100%" height="100%" controls="controls" autoplay="autoplay">
                &lt;!&ndash;<source src="images/videos/kouan.avi" type="video/mp4" />&ndash;&gt;
                <source src="images/videos/v12.mp4" type="video/mp4" />
            </video>
        </div>
    </div>
    <div class="came" id="camo13" style="position: absolute; left: 0; top: 50%; width: 50%;height: 50%;display: none;">
        <div style="height: 100%;width: calc(100% - 2px);"><div class="jklabel">监控点3</div>
            <video width="100%" height="100%" controls="controls" autoplay="autoplay">
                &lt;!&ndash;<source src="images/videos/kouan.avi" type="video/mp4" />&ndash;&gt;
                <source src="images/videos/v13.mp4" type="video/mp4" />
            </video>
        </div>
    </div>
    <div class="came" id="camo14" style="position: absolute; left: 50%; top: 50%; width: 50%;height: 50%;display: none;">
        <div style="height: 100%;width: calc(100% - 2px);"><div class="jklabel">监控点4</div>
            <video width="100%" height="100%" controls="controls" autoplay="autoplay">
                &lt;!&ndash;<source src="images/videos/kouan.avi" type="video/mp4" />&ndash;&gt;
                <source src="images/videos/v14.mp4" type="video/mp4" />
            </video>
        </div>
    </div>
    <div class="came" id="camo15" style="position: absolute; left: 50%; top: 50%; width: 50%;height: 50%;display: none;">
        <div style="height: 100%;width: calc(100% - 2px);"><div class="jklabel">监控点5</div>
            <video width="100%" height="100%" controls="controls" autoplay="autoplay">
                &lt;!&ndash;<source src="images/videos/kouan.avi" type="video/mp4" />&ndash;&gt;
                <source src="images/videos/v15.mp4" type="video/mp4" />
            </video>
        </div>
    </div>
    <div class="came" id="camo21" style="position: absolute; left: 0; top: 50%; width: 50%;height: 50%;">
        <div style="height: 100%;width: calc(100% - 2px);"><div class="jklabel">监控点6</div>
            <video width="100%" height="100%" controls="controls" autoplay="autoplay">
                &lt;!&ndash;<source src="images/videos/kouan.avi" type="video/mp4" />&ndash;&gt;
                <source src="images/videos/v21.mp4" type="video/mp4" />
            </video>
        </div>
    </div>
    <div class="came" id="camo22" style="position: absolute; left: 50%; top: 50%; width: 50%;height: 50%;display: none;">
        <div style="height: 100%;width: calc(100% - 2px);"><div class="jklabel">监控点7</div>
            <video width="100%" height="100%" controls="controls" autoplay="autoplay">
                &lt;!&ndash;<source src="images/videos/kouan.avi" type="video/mp4" />&ndash;&gt;
                <source src="images/videos/v22.mp4" type="video/mp4" />
            </video>
        </div>
    </div>
    <div class="came" id="camo31" style="position: absolute; left: 50%; top: 50%; width: 50%;height: 50%;display: none;">
        <div style="height: 100%;width: calc(100% - 2px);"><div class="jklabel">监控点8</div>
            <video width="100%" height="100%" controls="controls" autoplay="autoplay">
                &lt;!&ndash;<source src="images/videos/kouan.avi" type="video/mp4" />&ndash;&gt;
                <source src="images/videos/v31.mp4" type="video/mp4" />
            </video>
        </div>
    </div>
    <div class="came" id="camo32" style="position: absolute; left: 50%; top: 50%; width: 50%;height: 50%;">
        <div style="height: 100%;width: calc(100% - 2px);"><div class="jklabel">监控点9</div>
            <video width="100%" height="100%" controls="controls" autoplay="autoplay">
                &lt;!&ndash;<source src="images/videos/kouan.avi" type="video/mp4" />&ndash;&gt;
                <source src="images/videos/v32.mp4" type="video/mp4" />
            </video>
        </div>
    </div>
</div>-->

<div class="container" style="position: absolute; top: 0; /*right: 10px;*/ left: 801px; /*bottom: 10px;*/ width: calc(100% - 801px);height:100%;overflow-y:scroll;">
    <div class="Intranet" id="camo11" style="/*position: absolute; left: 0; top: 0; width: 50%;height: 50%;*/ width: 50%;height: 50%;">
        <div style="position: relative;height: 100%;width: calc(100% - 2px)">
            <div class="jklabel">监控点1</div>
            <video class="KAVideo" width="100%" height="100%" controls="controls" autoplay="autoplay">
                <source src="images/videos/v11.mp4" type="video/mp4" />
            </video>
        </div>
    </div>
    <div class="Intranet  hideDiv" id="camo12" style="width: 50%;height: 50%;">
        <div style="position: relative;height: 100%;width: calc(100% - 2px);">
            <div class="jklabel">监控点2</div>
            <video class="KAVideo" width="100%" height="100%" controls="controls" autoplay="autoplay">
                <source src="images/videos/v12.mp4" type="video/mp4" />
            </video>
        </div>
    </div>
    <div class="Intranet" id="camo13" style="width: 50%;height: 50%;">
        <div style="position: relative;height: 100%;width: calc(100% - 2px);">
            <div class="jklabel">监控点3</div>
            <video class="KAVideo" width="100%" height="100%" controls="controls" autoplay="autoplay">
                <source src="images/videos/v13.mp4" type="video/mp4" />
            </video>
        </div>
    </div>
    <div class="Intranet hideDiv" id="camo14" style="width: 50%;height: 50%;">
        <div style="position: relative;height: 100%;width: calc(100% - 2px);">
            <div class="jklabel">监控点4</div>
            <video class="KAVideo" width="100%" height="100%" controls="controls" autoplay="autoplay">
                <source src="images/videos/v14.mp4" type="video/mp4" />
            </video>
        </div>
    </div>
    <div class="Intranet hideDiv" id="camo15" style="width: 50%;height: 50%;">
        <div style="position: relative;height: 100%;width: calc(100% - 2px);">
            <div class="jklabel">监控点5</div>
            <video class="KAVideo" width="100%" height="100%" controls="controls" autoplay="autoplay">
                <source src="images/videos/v15.mp4" type="video/mp4" />
            </video>
        </div>
    </div>
    <div class="Intranet hideDiv" id="camo21" style="width: 50%;height: 50%;">
        <div style="position: relative;height: 100%;width: calc(100% - 2px);">
            <div class="jklabel">监控点6</div>
            <video class="KAVideo" width="100%" height="100%" controls="controls" autoplay="autoplay">
                <source src="images/videos/v21.mp4" type="video/mp4" />
            </video>
        </div>
    </div>
    <div class="Intranet" id="camo22" style="width: 50%;height: 50%;">
        <div style="position: relative;height: 100%;width: calc(100% - 2px);">
            <div class="jklabel">监控点7</div>
            <video class="KAVideo" width="100%" height="100%" controls="controls" autoplay="autoplay">
                <source src="images/videos/v22.mp4" type="video/mp4" />
            </video>
        </div>
    </div>
    <div class="Intranet hideDiv" id="camo31" style="width: 50%;height: 50%;">
        <div style="position: relative;height: 100%;width: calc(100% - 2px);">
            <div class="jklabel">监控点8</div>
            <video class="KAVideo" width="100%" height="100%" controls="controls" autoplay="autoplay">
                <source src="images/videos/v31.mp4" type="video/mp4" />
            </video>
        </div>
    </div>
    <div class="Intranet" id="camo32" style="width: 50%;height: 50%;">
        <div style="position: relative;height: 100%;width: calc(100% - 2px);">
            <div class="jklabel">监控点9</div>
            <video class="KAVideo" width="100%" height="100%" controls="controls" autoplay="autoplay">
                <source src="images/videos/v32.mp4" type="video/mp4" />
            </video>
        </div>
    </div>
</div>

<!--弹出层：视频回放的弹窗-->
<div id="videoReplay" style="display:none;"> <!--style="position:relative;display:none;width: 100%;height:100%;left:calc(50% - 10px);"-->
    <div class="jklabel">监控点</div>
    <video width="100%" height="100%" controls="controls" autoplay="autoplay" loop="loop">
        <source src="images/videos/v12.mp4" type="video/mp4" />
    </video>
</div>

<script>
    /*让监控视频循环播放*/
    var myKAVideos = document.getElementsByClassName("KAVideo");
    for(var i=0;i<myKAVideos.length;i++){
        var video = myKAVideos[i];
        video.addEventListener("ended", function() {//为video添加ended监听，当视频播放完毕后执行对应函数
            //console.log(this,"this是什么？");
            this.play();
        });
    }
</script>

</body>
</html>